<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js动态创建table</title>
</head>
<body>
    <div id="app"></div>
    <script>
        
        var arrWeeks = ['日','一','二','三','四','五','六']
        var div = document.getElementById('app') //获取div标签

        var table = document.createElement('table')//创建一个table

        var th = table.createTHead()//表格标题
        var thRow = th.insertRow()
        var thCell = thRow.insertCell()
        thCell.colSpan = 7
        thCell.innerText = '日期选择效果'

        var td = table.createTBody() //创建一个tbody标签
        var row = td.insertRow() //创建一个tr
        row.classList.add('thead')//为表头添加样式
        for(var i=0;i<7;i++){
            var cell = row.insertCell() //在tr中创建一列
            cell.innerText = arrWeeks[i]
        }

        var now = new Date()//当前时间
        var monthStart = new Date(now.setDate(1)) //获取当月的一号
        var monthStartWeekDay = monthStart.getDay() //获取一号是星期几
        var dyMonth = new Date(now.setDate(1)) //定义一个日期计算的时候使用的值
        for(var m=0;m<6;m++){
            var dyRow = td.insertRow() //添加一行
            for(var i=0;i<7;i++){
                var dyCell = dyRow.insertCell()
                if(monthStartWeekDay<=(i+7*m)){
                    dyCell.innerText = dyMonth.getDate()//
                    if(dyMonth.getMonth()!=monthStart.getMonth()){
                        dyCell.style.color = '#999'
                    }
                    dyMonth.setDate(dyMonth.getDate()+1)
                }
                else{
                    dyCell.innerText = ''
                }
            }
        }
        
        
        
        div.appendChild(table)
        
    </script>
</body>
</html>